<%--
  Created by IntelliJ IDEA.
  User: 19373
  Date: 2022/3/2
  Time: 14:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/mytaglibs.jsp" %>
<html>
<head>
    <title>AJAX_新用户注册</title>
</head>
<body>
<div>
    <table>
        <tr>
            <th>
                注册邮箱
            </th>
            <th>
                <input type="text" name="email" onblur="checkEmail(this)">
            </th>
            <th id="info">
            </th>
        </tr>
        <tr>
            <th>
                用户名
            </th>
            <th>
                <input type="text" name="username">
            </th>
        </tr>
        <tr>
            <th>
                密码
            </th>
            <th>
                <input type="text" name="password">
            </th>
        </tr>
    </table>
    <p><a href=""><input type="submit" name="submit" value="注册"></a></p>
</div>
<script>
    function checkEmail(obj) {
        let email = obj.value;
        console.log(email)
        //"" null undefined三种空情况不执行
        debugger;
        if (email) {
            const xHttp = new XMLHttpRequest();

            xHttp.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    console.log(this.responseText);
                    const myObj = JSON.parse(this.responseText);
                    let msgInfo = myObj.msg;
                    console.log(msgInfo);
                    if (msgInfo === "success") {
                        document.getElementById("info").innerHTML = '<span style="color: green">邮箱正确</span>';
                    } else if (msgInfo === "fail") {
                        document.getElementById("info").innerHTML = '<span style="color: red">邮箱不正确</span>';
                    } else {
                        document.getElementById("info").innerHTML = '';
                    }
                }
            };
            xHttp.open("POST", "${ctx}/AjaxServlet", true);//异步调用
            xHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xHttp.send("email" + email);
        }
    }
</script>
</body>
</html>
